<template>
  <view v-if="show" class="auth-modal-overlay" @click.stop="handleOverlayClick">
    <view class="auth-modal" @click.stop>
      <!-- 弹窗关闭按钮 -->
      <view class="modal-close-btn" @click="handleClose">✕</view>
      
      <!-- 复用 login.vue 的登录卡片内容 -->
      <view class="login-card">
        <view class="logo-section">
          <view class="logo-placeholder">🏡</view>
          <text class="app-name">村务通</text>
          <text class="app-desc">美丽乡村，和谐发展</text>
        </view>
        
        <view class="login-section">
          <view class="login-title">欢迎使用</view>
          <view class="login-subtitle">请使用微信授权登录</view>
          
          <button 
            class="wechat-login-btn" 
            @click="handleWechatLogin"
            :loading="isLoading"
            :disabled="isLoading || !hasAgreed"
          >
            <text class="wechat-icon">💬</text>
            <text class="btn-text">{{ getButtonText() }}</text>
          </button>
          
          <view class="privacy-agreement">
            <checkbox-group @change="onAgreementChange">
              <label class="agreement-checkbox">
                <checkbox value="agree" :checked="hasAgreed" />
                <view class="agreement-text">
                  <text class="tips-text">我已阅读并同意</text>
                  <text class="link-text" @click.stop="showPrivacy('用户协议')">《用户协议》</text>
                  <text class="tips-text">和</text>
                  <text class="link-text" @click.stop="showPrivacy('隐私政策')">《隐私政策》</text>
                </view>
              </label>
            </checkbox-group>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import authService from '@/utils/auth.js'

export default {
  name: 'AuthModal',
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isLoading: false,
      hasAgreed: false
    }
  },
  methods: {
    handleClose() {
      // 如果已登录，可以关闭；否则不允许关闭
      if (authService.isLoggedIn()) {
        this.$emit('close')
      } else {
        uni.showToast({
          title: '请先完成登录',
          icon: 'none',
          duration: 1500
        })
      }
    },
    
    handleOverlayClick() {
      // 点击遮罩层不关闭，必须登录
      // this.handleClose()
    },
    
    async handleWechatLogin() {
      if (this.isLoading) return
      
      // 必须明确同意协议才能登录
      if (!this.hasAgreed) {
        uni.showToast({
          title: '请先勾选同意协议',
          icon: 'none',
          duration: 2000
        })
        return
      }
      
      this.isLoading = true
      
      try {
        console.log('开始微信授权登录')
        await authService.wechatLogin()
        
        uni.showToast({
          title: '登录成功',
          icon: 'success',
          duration: 1500
        })
        
        // 登录成功，通知父组件（复用 login.vue 的逻辑，但不跳转）
        setTimeout(() => {
          this.$emit('success')
          this.resetForm()
        }, 1500)
        
      } catch (error) {
        console.error('微信登录失败:', error)
        uni.showToast({
          title: '登录失败，请重试',
          icon: 'none',
          duration: 2000
        })
      } finally {
        this.isLoading = false
      }
    },
    
    // 处理同意协议复选框变化
    onAgreementChange(e) {
      this.hasAgreed = e.detail.value.length > 0
      console.log('同意状态:', this.hasAgreed)
    },
    
    showPrivacy(type) {
      uni.showModal({
        title: type,
        content: `这里是${type}的完整内容。请仔细阅读用户服务协议和隐私政策，了解我们如何收集、使用和保护您的个人信息。`,
        showCancel: false,
        confirmText: '我已了解'
      })
    },
    
    // 获取按钮文本
    getButtonText() {
      if (this.isLoading) {
        return '登录中...'
      }
      if (!this.hasAgreed) {
        return '请先勾选同意协议'
      }
      return '微信授权登录'
    },
    
    // 重置表单
    resetForm() {
      this.hasAgreed = false
      this.isLoading = false
    }
  },
  watch: {
    show(newVal) {
      if (!newVal) {
        // 弹窗关闭时重置表单
        this.resetForm()
      }
    }
  }
}
</script>

<style scoped>
/* 弹窗遮罩层 */
.auth-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* 弹窗容器 */
.auth-modal {
  position: relative;
  width: 600rpx;
  max-width: 90%;
  max-height: 90vh;
  overflow-y: auto;
}

/* 关闭按钮 */
.modal-close-btn {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40rpx;
  color: #999;
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.modal-close-btn:active {
  background-color: rgba(255, 255, 255, 1);
}

/* 复用 login.vue 的样式 */
.login-card {
  background-color: white;
  border-radius: 24rpx;
  padding: 60rpx 40rpx;
  width: 100%;
  box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.1);
}

.logo-section {
  text-align: center;
  margin-bottom: 60rpx;
}

.logo-placeholder {
  font-size: 120rpx;
  margin-bottom: 20rpx;
}

.app-name {
  display: block;
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.app-desc {
  display: block;
  font-size: 28rpx;
  color: #666;
}

.login-section {
  text-align: center;
}

.login-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.login-subtitle {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 60rpx;
}

.wechat-login-btn {
  width: 100%;
  height: 88rpx;
  background: linear-gradient(135deg, #07C160, #06AD56);
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40rpx;
  border: none;
  box-shadow: 0 8rpx 20rpx rgba(7, 193, 96, 0.3);
}

.wechat-login-btn:active {
  transform: translateY(2rpx);
  box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.3);
}

.wechat-icon {
  font-size: 40rpx;
  margin-right: 20rpx;
}

.btn-text {
  color: white;
  font-size: 32rpx;
  font-weight: bold;
}

.privacy-agreement {
  margin-top: 20rpx;
  font-size: 24rpx;
}

.agreement-checkbox {
  display: flex;
  align-items: flex-start;
  padding: 0 10rpx;
}

.agreement-text {
  margin-left: 10rpx;
  line-height: 1.6;
}

.tips-text {
  color: #666;
}

.link-text {
  color: #4CAF50;
  text-decoration: underline;
}

/* 禁用状态的按钮样式 */
.wechat-login-btn[disabled] {
  opacity: 0.6;
  box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.2);
}
</style>
